<template>
    <div class="log__filter-item">
        <div class="log__filter-title">唯品会<span class="log__filter-title-type">商户</span></div>
        <div class="log__filter-text">操作日志</div>
    </div>
    <div class="user-data__filter-item">
        <a-select placeholder="操作类型" v-model:value="status" :allowClear="true">
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">冻结</a-select-option>
            <a-select-option value="3">删除</a-select-option>
        </a-select>
    </div>

    <div class="user-data__filter-item">
        <a-range-picker valueFormat="YYYY-MM-DD HH:mm" v-model:value="time" />
    </div>

    <div class="user-data__filter-item">
        <yl-search-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-search-reset>
    </div>
</template>
<script lang="ts">
import moment, { Moment } from 'moment';
import { computed, defineComponent, reactive, ref, toRefs, onMounted } from 'vue';

import ylSearchReset from '@/components/ylSeachReset.vue';
import { useI18n } from 'vue-i18n';
import { getDictDetails } from '@/api/system';
// getDictDetails

export default defineComponent({
    name: 'user-filter',
    components: {
        ylSearchReset,
    },
    props: {
        hideEnabled: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            status: null,
            time: [],
            industryId: null,
        });

        const loading = ref<boolean>(false);
        const industryList = ref<[]>([]);
        onMounted(() => {});
        const handleSubmit = () => {
            console.log(state);
            // emit('onSubmit', state);
        };
        const handleReset = () => {
            state.status = null;
            state.industryId = null;
            emit('onReset', state);
        };
        const onChange = (value: Moment[], dateString: string[]) => {
            console.log('Selected Time: ', value);
            console.log('Formatted Selected Time: ', dateString);
        };

        const onOk = (value: Moment[]) => {
            console.log('onOk: ', value);
        };

        return {
            ...toRefs(state),
            loading,
            handleSubmit,
            handleReset,
            t,
            industryList,
            onChange,
            onOk,
        };
    },
});
</script>
<style lang="scss" scoped>
.user-data__filter-item {
    margin-right: $width20;
    &:last-child {
        margin-right: $width0;
    }
}
.log__filter-item {
    display: flex;
    align-items: center;
    .log__filter-title {
        font-size: 20px;
        font-weight: bold;
        color: #101010;
        position: relative;
        margin-right: 40px;
        .log__filter-title-type {
            position: absolute;
            top: -10px;
            right: -40px;
            font-size: 12px;
            display: block;
            border: 1px solid #eea265;
            color: #eea265;
            padding: 1px 7px;
            border-radius: 13px;
        }
    }
    .log__filter-text {
        font-size: 20px;
        color: #101010;
        margin-right: 20px;
        margin-left: 10px;
    }
}
</style>
